<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        a {
            text-decoration-line: none;
        }

        body{
            background-color: #f5f5f5; /* Light Gray */
        }

        .body{
            padding-bottom: 60px;
        }

        .top-bar {
            background-color: #e25822; /* Tangerine color */
            color: white;
            font-size: 24px;
            padding: 10px;
            text-align: center;
        }

        .button {
            border: none;
            border-radius: 5px;
            color: white;
            display: flex;
            font-size: 18px;
            margin: 10px;
            padding: 15px 30px;
            cursor: pointer;
        }

        .button i {
            font-size: 30px;
            margin-right: 15px;
        }

        .green {
            background-color: #4caf50; /* Green color */
        }

        .pink {
            background-color: #e91e63; /* Raspberry color */
        }

        .orange {
            background-color: #ff9800; /* Amber color */
        }

        .red {
            background-color: #f44336; /* Red color */
        }

        .purple {
            background-color: #9c27b0; /* Purple color */
        }

        .blue {
            background-color: #2196f3; /* Blue color */
        }

        .section {
            background-color: #e25822; /* Tangerine color */
            color: white;
            font-size: 20px;
            padding: 10px;
            margin-top: 10px;
        }

        @media screen and (max-width: 480px) {
            .button {
                display: block;
                width: 80%;
                margin: 10px auto;
            }
        }
        .bottom-nav {
            background-color: #333;
            position: fixed;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .bottom-nav a {
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 0;
            font-size: 17px;
            flex: 1;
        }
        .bottom-nav i {
            margin-right: 4px;
        }

        .bottom-nav a:hover {
            background-color: #ddd;
            color: black;
        }

        .bottom-nav a.active {
            background-color: #4caf50; /* Green color */
            color: white;
        }
    </style>
</head>
<body class="body">
<div class="top-bar">Expandir o conhecimento sobre o Festival da Primavera</div>

<div class="section">Base</div>
<div class="button green" onclick="setAct('view1.html')" style="display: grid; grid-template-columns: auto 1fr; align-items: center;">
    <i class="fa fa-calendar"></i> Introdução ao Festival da Primavera
</div>
<div class="button pink" onclick="setAct('view2.html')" style="display: grid; grid-template-columns: auto 1fr; align-items: center;">
    <i class="fa fa-cutlery"></i> Alimentação tradicional de férias
</div>
<div class="button orange" onclick="setAct('view1.html')" style="display: grid; grid-template-columns: auto 1fr; align-items: center;">
    <i class="fa fa-globe"></i> Cultura do festival
</div>
<div class="button red" onclick="setAct('view2.html')" style="display: grid; grid-template-columns: auto 1fr; align-items: center;">
    <i class="fa fa-users"></i> Reuniões familiares
</div>
<div class="button blue" onclick="setAct('view2.html')" style="display: grid; grid-template-columns: auto 1fr; align-items: center;">
    <i class="fa fa-gift"></i> Decoração do festival
</div>

<div class="section">Avançado</div>
<div class="button purple" onclick="setAct('view1.html')" style="display: grid; grid-template-columns: auto 1fr; align-items: center;">
    <i class="fa fa-history"></i> O Festival da História da Primavera
</div>
<div class="button orange" onclick="setAct('view2.html')" style="display: grid; grid-template-columns: auto 1fr; align-items: center;">
    <i class="fa fa-map"></i> Celebração das características locais
</div>
<div class="button red" onclick="setAct('view1.html')" style="display: grid; grid-template-columns: auto 1fr; align-items: center;">
    <i class="fa fa-tv"></i> Programa de entretenimento
</div>
<div class="button blue" onclick="setAct('view2.html')" style="display: grid; grid-template-columns: auto 1fr; align-items: center;">
    <div style="float: left"><i class="fa fa-pie-chart"></i></div>
    <div>Comparação entre o Festival da Primavera e outros festivais</div>
</div>


<!-- 其他网页内容 -->
<div class="bottom-nav">
    <a href="index.html" class="active" onclick="setActiveNav(this)"><i class="fa fa-home"></i>página inicial</a>
    <a href="question.html" onclick="setActiveNav(this)"><i class="fa fa-align-justify"></i>teste</a>
    <a href="mine.html" onclick="setActiveNav(this)"><i class="fa fa-user"></i>Centro Pessoal</a>
</div>

<script>

    // JavaScript 函数，用于切换按钮的活动状态
    function setActive(element) {
        // 移除所有按钮的活动状态
        var buttons = document.querySelectorAll('.button');
        buttons.forEach(function (button) {
            button.classList.remove('active');
        });

        // 添加当前点击按钮的活动状态
        element.classList.add('active');
    }

    // JavaScript 函数，用于切换底部导航按钮的活动状态
    function setActiveNav(element) {
        // 移除所有导航按钮的活动状态
        var navButtons = document.querySelectorAll('.bottom-nav a');
        navButtons.forEach(function (navButton) {
            navButton.classList.remove('active');
        });

        // 添加当前点击导航按钮的活动状态
        element.classList.add('active');
    }

    function setAct(target) {
        window.location.href = target;
    }
</script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // 检查是否存在登录信息
        if (!isLogin()) {
            // 未登录，跳转到登录页面
            console.log("11111111111111111")
            window.location.replace = "main.html";
        }
    });

    function isLogin() {
        var expirationTime = localStorage.getItem('expirationTime');

        if (expirationTime && new Date().getTime() > parseInt(expirationTime)) {
            // Token is expired, remove it
            localStorage.removeItem('token');
            console.log("1111111111111111")
            localStorage.removeItem('expirationTime');
            return false;
        }

        return true;
    }
</script>
</body>
</html>